import React, { Component } from "react";
import {
  Button,
  Select,
  Form,
  Input,
  Tabs,
  Table,
  Divider,
  Modal,
  message,
} from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { observer, inject } from "mobx-react";
const { TabPane } = Tabs;
class MyBtn extends Component {
  handEditor = (obj) => {
    console.log(obj);
  };
  handDel = (id) => {
    Modal.confirm({
      title: "删除",
      icon: <ExclamationCircleOutlined />,
      content: "删除后不可恢复，是否确认删除！",
      okText: "确认",
      cancelText: "取消",
      onOk: () => {
        message.success("删除成功!");
        this.props.myDel(id);
      },
    });
  };
  render() {
    return (
      <div>
        <Button onClick={this.handEditor.bind(this, this.props.rowdata)}>
          编辑
        </Button>
        <Button onClick={this.handDel.bind(this, this.props.data)}>删除</Button>
      </div>
    );
  }
}
// ---------------------------------表格数据
@inject("hp")
@observer
class HpTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectionType: "checkBox",
      selectedRowKeys: [],
    };
  }
  static getDerivedStateFromProps(nextprops) {
    const { colData, data } = nextprops;
    return {
      columns: colData,
      data: data,
    };
  }
  delSelectKeys = () => {
    this.setState({
      selectedRowKeys: [],
    });
  };
  onSelectChange = async (selectedRowKeys) => {
    // console.log(selectedRowKeys)
    this.setState({ selectedRowKeys });
    this.props.hp.addShArr(selectedRowKeys);
  };
  componentDidMount() {
    this.props.delSelectKeys(this);
  }
  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <div>
        <Divider />
        <Table
          columns={this.state.columns}
          dataSource={this.state.data}
          pagination={{
            pageSize: 5,
            position: ["bottomCenter"],
          }}
          rowSelection={{
            type: this.state.selectionType,
            ...rowSelection,
          }}
        />
      </div>
    );
  }
}
// ---------------------------------页面主体
@inject("hp")
@observer
class Zxdg extends Component {
  constructor() {
    super();
    this.state = {
      select: {
        title: "",
        name: "",
        selectValue: "全部",
        lbValue: "",
        ztValue: "",
      },
    };
  }
  // -------------------------------数据双向绑定
  onChange = (name, value) => {
    if (name === "ztValue" || name === "lbValue") {
      this.props.hp.xz2(value, name);
    }
    let a = Object.assign({}, this.state.select, { [name]: value });
    this.setState({
      select: a,
    });
  };
  handleChange = (name) => {
    return (e) => this.onChange(name, e.target.value);
  };
  selectChange = (name) => {
    return (e) => this.onChange(name, e);
  };
  // --------------------------------搜索按钮
  selectBtn = () => {
    if (this.state.select.title === "" && this.state.select.name === "") {
      message.warning("搜索不能够为空！");
    } else if (
      this.state.select.title !== "" ||
      this.state.select.name !== ""
    ) {
      if (this.state.select.title !== "" && this.state.select.name !== "") {
        let type = "title";
        this.props.hp.selTAN(this.state.select.title, type);
        type = "name";
        this.props.hp.selTAN(this.state.select.name, type);
      } else if (this.state.select.title !== "") {
        let type = "title";
        this.props.hp.selTAN(this.state.select.title, type);
      } else {
        let type = "name";
        this.props.hp.selTAN(this.state.select.name, type);
      }
    }
  };
  czBtn = () => {
    this.props.hp.getData();
    message.success("重置成功");
  };
  // --------------------------------生命周期
  async componentDidMount() {
    this.props.hp.getData();
  }
  allSh = () => {
    this.props.hp.allSh();
    this.$child.delSelectKeys();
  };
  delSelectKeys = (props) => {
    this.$child = props;
  };
  render() {
    return (
      <div>
        <Tabs defaultActiveKey="1" type="card">
          <TabPane tab="咨询导购" key="1">
            <Form
              style={{
                display: "flex",
                width: "100%",
                justifyContent: "space-between",
                alignContent: "center",
              }}
            >
              <Form.Item label="栏目：">
                <Select
                  defaultValue={this.state.select.selectValue}
                  onChange={this.selectChange("lbValue")}
                >
                  <Select.Option value="全部">全部</Select.Option>
                  <Select.Option value="行业资讯">行业资讯</Select.Option>
                  <Select.Option value="导购">导购</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item label="状态：">
                <Select
                  defaultValue={this.state.select.selectValue}
                  onChange={this.selectChange("ztValue")}
                >
                  <Select.Option value="全部">全部</Select.Option>
                  <Select.Option value="等待审核">等待审核</Select.Option>
                  <Select.Option value="通过审核">通过审核</Select.Option>
                  <Select.Option value="未通过审核">未通过审核</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item label="文章标题：">
                <Input
                  value={this.state.select.title}
                  onChange={this.handleChange("title")}
                />
              </Form.Item>
              <Form.Item label="楼盘名称：">
                <Input
                  value={this.state.select.name}
                  onChange={this.handleChange("name")}
                />
              </Form.Item>
              <Form.Item>
                <Button onClick={this.selectBtn}>搜索</Button>
                <Button onClick={this.czBtn} type="primary">
                  重置
                </Button>
              </Form.Item>
            </Form>
            <Button type="primary" onClick={this.allSh}>
              批量审核
            </Button>
            <HpTable
              delSelectKeys={this.delSelectKeys}
              colData={this.props.hp.columns}
              data={this.props.hp.data}
            />
          </TabPane>
          <TabPane tab="发布文章" key="2">
            发布文章
          </TabPane>
        </Tabs>
      </div>
    );
  }
}
export default { Zxdg, MyBtn };
